<template>
  <div class="searchList">
       <songListItem
        @update:music="$emit('update:music', $event)"
        @update:playlist="$emit('update:playlist', SongList)"
        v-for="(song,index) in SongList"
        :key="song.id"
        :item="song"
        :index="index"
        :currentMusic="$attrs.currentMusic"
        :paused="$attrs.paused"
      ></songListItem>
  </div>
</template>

<script>
import songListItem from './songListItem'
export default {
    components:{
        songListItem
    },
    data(){
        return {
            SongList:[],
        }
    },
    beforeCreate(){
        if(this.$attrs.keywords=="")return;
    this.$root.isShowLoading = true;

        this.axios.get('/search',{params:{keywords:this.$attrs.keywords}})
        .then((result)=>{
            this.SongList = result.data.result.songs;
    this.$root.isShowLoading = false;

        })
    },
    created(){
        console.log('我进来了');
    }
}
</script>

<style scoped>
.searchList{
    padding: 0 5px 0 15px;
}
</style>